<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图文混排</title>
    <style type="text/css">
        #content{
            font-family: 楷体,sans-serif;
        }
        .article{
            display: inline-block;
            background-color: #000;
            color: #fff;
            width: 200px;
            padding:5px;
            position: relative;
            opacity:0.9;
        }
        #content h2{
            height: 20px;
            width: 60px;
            background-color: #f00;
            font-weight: bolder;
            text-align: center;
            font-size: 14px;
            position: absolute;
            top: 20px;
            right: 0;
            z-index: 1;
        }
        .article h3{
            font-size: 12px;
            text-align: center;
        }
        .article p{
            font-size: 12px;
            text-indent: 2px;
        }
        @keyframes move {
            0%{transform: scale(1)}
            25%{transform: scale(0.8)}
            50%{transform: scale(0.6)}
            60%{transform: rotate(90deg)}
            70%{transform: rotate(180deg)}
            80%{transform: rotate(270deg)}
            100%{transform: rotate(360deg)}
        }
        #photo:hover img{
            animation: move 2s linear infinite;
        }
    </style>
</head>
<body>
<section id="content">
    <div class="article">
        <h2>七月</h2>
        <div id="photo">
            <a href="#"><img src="../source/img/sara.jpg" alt=""></a>
        </div>
        <h3>萨拉--年度最热的女人</h3>
        <p>萨拉--年度最热的女人，没有你不能做到的</p>
    </div>
</section>
</body>
</html>